<template>
  <div style="background-color:#fff;padding-bottom:40px;">
    <div class="banner">
      <el-carousel :height="height" trigger="click">
        <el-carousel-item v-for="item in bannerList" :key="item">
          <div class="bannerBox">
            <img :src="item" alt :style="{'height':height*2 + 'px'}" />
            <div class="text">
              <div>
                <h2>英格力士：为英语学习保驾护航</h2>
                <p>
                  英格力士坚信，卓越的英语培训经验可以给学生带来持续的英语学习和良好的氛围，
                  <br />以专业的师资和服务，保证英语的学习高效、有条不紊。自由的讨论区，使得同学学习经验更加有效。
                </p>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="course">
      <h1 class="center title">精品课程</h1>
      <ul class="courseList">
        <li @click="changeCourseItem(1)">
          <div>
            <div>
              <i class="iconfont icon-md-verified_user"></i>
              <p :class="{'active':courseItem == 1}">
                英语口语学习
                <br />培训
              </p>
            </div>
          </div>
        </li>
        <li @click="changeCourseItem(2)">
          <div>
            <div>
              <i class="iconfont icon-md-find_in_page"></i>
              <p :class="{'active':courseItem == 2}">
                英语阅读拔高和
                <br />有效阅读训练
              </p>
            </div>
          </div>
        </li>
        <li @click="changeCourseItem(3)">
          <div>
            <div>
              <i class="iconfont icon-md-add_alert"></i>
              <p :class="{'active':courseItem == 3}">
                英语听力方法
                <br />分析培训
              </p>
            </div>
          </div>
        </li>
        <li @click="changeCourseItem(4)">
          <div>
            <div>
              <i class="iconfont icon-md-https"></i>
              <p :class="{'active':courseItem == 4}">
                英语写作和
                <br />语法纠错
              </p>

            </div>
          </div>
        </li>
      </ul>
      <ul class="courseItem">
        <li v-show="courseItem == 1">
          <h4 class="title">英语口语学习</h4>
          <p>课程主要提供口语发音，口语词伙的提高课程，提供口语练习方法和练习音频。学会纯正英语发音，彻底终结发音难的苦恼，快速说流利地道口语，不生拼语法，不硬凑单词</p>
        </li>
        <li v-show="courseItem == 2">
          <h4 class="title">英语阅读拔高和有效阅读训练</h4>
          <p>英语阅读拔高和有效阅读训练涵盖经济、环境、社会生活、文化教育、科技等话题，帮助读者全面提升阅读能力、阅读速读、语感。
        <li v-show="courseItem == 3">
          <h4 class="title">英语听力方法分析培训</h4>
          <p>英语听力方法分析培训是加强语法训练， 引导自己扩大词汇量，重视培养听力理解的技巧与良好的听的习惯，培训包含听力提高一些实用的技巧和信息。</p>
        </li>
        <li v-show="courseItem == 4">
          <h4 class="title">英语写作和语法纠错</h4>
          <p>英语写作和语法纠错主要介绍如何从基本上解决下笔难，从根源解决语法问题和写作问题，提高基础的英语谁水平。提供每日电影、书籍，养成写日记的习惯，持续长久的训练自己的输出。</p>
        </li>
      </ul>
    </div>
    <div class="business">
      <h2 class="title center">核心业务</h2>
      <ul>
        <li>
          <dl>
            <dt>
              <div>
                <img src="/static/img/business1.png" alt />
              </div>
            </dt>
            <dd>
              <div>
                <div>
                  <h4 class="title">英语水平改善（6S）</h4>
                  <p>
                    通过使用本系统，教师可以将资源上传到平台中，学生可以随时进行
                    学习和交流，将自己遇到的问题和其他同学分享， 同时也可以寻找
                    练习口语或者一起准备考试的伙伴。这样就极大地提升了学生针对性学习及讨论的效率。
                  </p>
                </div>
              </div>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>
              <div>
                <img src="/static/img/business2.png" alt />
              </div>
            </dt>
            <dd>
              <div>
                <div>
                  <h4 class="title">学习讨论</h4>
                  <p>
                    学习讨论的特点就是学生在学习英语的时候，遇到问题可以直接在讨论区进行讨论。讨论区当中可以各抒己见，也可以对于
                    他人提出的良好的意见查看或者私聊，得到进一步的了解，全员都可以参加讨论。
                  </p>
                </div>
              </div>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>
              <div>
                <img src="/static/img/business3.png" alt />
              </div>
            </dt>
            <dd>
              <div>
                <div>
                  <h4 class="title">降低学习交流成本</h4>
                  <p>
                    在较大的公众平台学习的缺点之一就是交流成本较大。而该系统可以提供校内学生讨论交流的平台，用户均为校内学生，不论是线上讨论或是线下交流都具有较小的学习交流成本。
                  </p>
                </div>
              </div>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>
              <div>
                <img src="/static/img/business4.png" alt />
              </div>
            </dt>
            <dd>
              <div>
                <div>
                  <h4 class="title">促进教育资源良性循环</h4>
                  <p>
                    学校可以通过该平台将好的教学资源提供给学生学习，而学生之间的讨论交流能够进一步促进外语学习，这种机制促进了校内教育资源的良性循环，对学生大有裨益。
                  </p>
                </div>
              </div>
            </dd>
          </dl>
        </li>
<!--        <li>-->
<!--          <dl>-->
<!--            <dt>-->
<!--              <div>-->
<!--                <img src="/static/img/business5.png" alt />-->
<!--              </div>-->
<!--            </dt>-->
<!--            <dd>-->
<!--              <div>-->
<!--                <div>-->
<!--                  <h4 class="title">学习行为观察（BBS）</h4>-->
<!--                  <p>-->
<!--                    建立BBS行为观察与沟通方法，注重员工安全行为的培养和双向性的员工安全行为审核是各级管理层了解和掌握员工安全-->
<!--                    行为和信息的有效工具，也是与员工进行沟通的重要途径。通过对话式的安全行为审核，可发现和表彰员工良好的安全行-->
<!--                    为或纠正员工的不安全行为，引导员工养成良好的安全习惯。-->
<!--                  </p>-->
<!--                </div>-->
<!--              </div>-->
<!--            </dd>-->
<!--          </dl>-->
<!--        </li>-->
      </ul>
    </div>
    <div class="summary">
      <dl>
        <dt>
          <img src="/static/img/summary.jpg" alt />
        </dt>
        <dd>
          <h4 class="center title">系统简介</h4>
          <p>本项目是面向学校内部的外语学习者学习和交流的平台，该系统中，教师可以在进行课程教学资源的上传，并管理该课程相关消息的发布，将学校内部外语教学资源上传供校内学生学习使用，同时校内学生可以选择需要学习的外语进入相应课程观看教学视频或下载课程课件。</p>
          <p>平台提供校内学生讨论区，学生可以根据自己学习的语言或等级考试进行交流探讨。当今时代，外语能力是一个具有竞争力的大学生的基本素养，学校可以通过该平台，实现内部资源的共享，同时学习讨论区能够让学生更高效地学习外语，满足有需要的同学组队练习口语等的需求等，从而达到校内资源利用最大化和教育资源良性循环的效果。</p>
          <p>所以本项目旨在于建立一个新一代面向当代学生需求的外语学习与交流平台。</p>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
export default {
  // 1800 554   3.24
  // 1550 475    3.26
  // 1398 429    3.25
  name: "index",
  data() {
    return {
      bannerList: ["/static/img/banner3.jpg", "/static/img/banner4.jpg"],
      height: "400px",
      courseItem: 1,
      screenWidth: 1920
    };
  },
  methods: {
    changeCourseItem(index) {
      this.courseItem = index;
    }
  },
  mounted() {
    var _this = this;
    window.onresize = function() {
      // 定义窗口大小变更通知事件
      _this.screenWidth = document.documentElement.clientWidth; //窗口宽度
    };
  },
  created() {
    this.height = document.body.offsetWidth / 3.25 + "px";
  },
  watch: {
    screenWidth: function(val) {
      this.height = document.body.offsetWidth / 3.25 + "px";
    }
  }
};
</script>
<style lang="scss" scoped>
.banner {
  .bannerBox {
    height: 100%;
    position: relative;
    .text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: table;
      color: #fff;
      > div {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        h2 {
          font-size: 30px;
          font-weight: 400;
          margin-bottom: 15px;
        }
        p {
          font-size: 20px;
          line-height: 30px;
        }
      }
    }
  }
  img {
    width: 100%;
    // height: 100%;
  }
}
.course {
  margin-top: 20px;
  > .title {
    font-size: 24px;
    font-weight: normal;
    width: 150px;
    margin: 0 auto;
    line-height: 40px;
    border-bottom: 1px solid #bbb;
  }
  .courseList {
    text-align: center;
    height: 255px;
    li {
      display: inline-block;
      width: 193px;
      height: 100%;
      padding: 30px 0 0 0;
      margin-right: 100px;
      cursor: pointer;
      > div {
        display: table;
        height: 100%;
        width: 100%;
        > div {
          display: table-cell;
          text-align: center;
          vertical-align: top;
          .iconfont {
            font-size: 120px;
            color: #007cdc;
          }
          p {
            margin-top: 10px;
            font-size: 18px;
            line-height: 30px;
          }
        }
      }
      .active {
        color: #007cdc;
      }
    }
    li:nth-last-child(1) {
      margin-right: 0;
    }
  }
  .courseItem {
    width: 100%;
    height: 180px;
    background-color: #dee6ec;
    li {
      width: 1080px;
      margin: 0 auto;
      height: 100%;
      padding-top: 25px;
      .title {
        color: #007cdc;
        font-size: 18px;
        text-align: center;
        padding-bottom: 15px;
      }
      p {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
.business {
  padding-top: 20px;
  > .title {
    margin: 0 auto;
    width: 150px;
    line-height: 40px;
    border-bottom: 1px solid #bbb;
    font-weight: 400;
  }
  > ul {
    li {
      height: 300px;
      width: 100%;
      dl {
        width: 1100px;
        margin: 0 auto;
        height: 100%;
        dt {
          width: 260px;
          height: 100%;
          display: table;
          div {
            display: table-cell;
            vertical-align: middle;
            img {
              width: 100%;
            }
          }
        }
        dd {
          height: 100%;
          div {
            display: table;
            height: 100%;
            width: 100%;
            div {
              display: table-cell;
              vertical-align: middle;
              text-align: left;
              p {
                font-size: 14px;
                line-height: 24px;
              }
            }
          }
          .title {
            font-size: 20px;
            color: #007cdc;
            line-height: 30px;
            margin-bottom: 20px;
          }
        }
      }
    }
    li:nth-child(2n-1) {
      background-color: #fff;
      dt {
        float: left;
      }
      dd {
        margin-left: 300px;
      }
    }
    li:nth-child(2n) {
      background-color: #dee6ec;
      dt {
        float: right;
      }
      dd {
        margin-right: 300px;
      }
    }
  }
}
.summary {
  height: 460px;
  width: 1160px;
  margin: 0 auto;
  dl {
    height: 100%;
    width: 100%;
    dt {
      float: left;
      width: 490px;
      height: 100%;
      img {
        width: 490px;
        height: 310px;
        margin-top: 75px;
      }
    }
    dd {
      height: 100%;
      margin-left: 375px;
      background-color: #f9f9f9;
      padding: 30px;
      padding-left: 164px;
      .title {
        font-size: 24px;
        line-height: 40px;
        margin-bottom: 25px;
        font-weight: 400;
      }
      p {
        font-size: 14px;
        text-indent: 30px;
        line-height: 24px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
